<template>
	<div class="searchDiv" ref="searchBox">
		<div class="searchContainer" id="inputDiv">
			<div class="inputDiv">
				<input type="text" v-model="searchContent" name="text" class="input" id="input" placeholder="搜索从此开始"
							 @input="searchRecommend"
							 @focus="handleFocus"
							 @blur="handleBlur"
							 @keyup.enter="search">

				<div class="border"></div>

				<button class="micButton">
					<a-dropdown :getPopupContainer="() => $refs.searchBox">
						<a class="ant-dropdown-link" @click.prevent>
							<img :src="$resolveAssetsUrl(`images/svg/${searchPreference}.svg`)" class="search_logo" alt="搜索偏好">
						</a>
						<template #overlay>
							<a-menu>
								<a-menu-item v-on:click="switchSearchType('baidu')">
									<a href="javascript:;" class="line_center">
										<img src="../assets/images/svg/baidu.svg" class="search_logo_baidu_mini">
										<span>百度</span>
									</a>
								</a-menu-item>
								<a-menu-item v-on:click="switchSearchType('biying')">
									<a href="javascript:;" class="line_center">
										<img src="../assets/images/svg/biying.svg" class="search_logo_biying_mini">
										<span>必应</span>
									</a>
								</a-menu-item>
								<a-menu-item v-on:click="switchSearchType('google')">
									<a href="javascript:;" class="line_center">
										<img src="../assets/images/svg/google.svg" class="search_logo_google_mini">
										<span>谷歌</span>
									</a>
								</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</button>
			</div>

			<div class="recommendContainer" v-show="recommendShow">
				<div class="line"/>
				<a-menu v-for="(baiduRecommend, index) in recommendData.baidu" @click="clickSearchIndex">
					<a-menu-item :key="index">{{baiduRecommend}}</a-menu-item>
				</a-menu>
			</div>
		</div>


	</div>
</template>

<script>

import recommendService from '@/service/recommendService.js';

export default {
	data() {
		return {
			searchPreference: 'baidu',
			recommendShow: false,
			searchContent: '',
			recommendData: {
				'baidu': [],
				'biying': [],
			},
		};
	},
	components: {
		// DownOutlined,
	},
	mounted() {
		this.searchPreference = localStorage.getItem("searchPreference");
		if (this.searchPreference == null) {
			this.searchPreference = "baidu"
		}
	},
	methods: {
		handleFocus() {
			const inputBox = document.getElementById('inputDiv');
			// inputBox.style.transform = 'scale(1.01)';
			inputBox.style.boxShadow = '2px 2px 10px rgba(0, 0, 0, 0.3)';
			inputBox.style.transition = 'border-color 2s ease-in-out';
		},

		handleBlur() {
			const inputBox = document.getElementById('inputDiv');
			inputBox.style.removeProperty('transition');
			inputBox.style.removeProperty('box-shadow');
			inputBox.style.removeProperty('transform');
		},

		switchSearchType(type) {
			localStorage.setItem("searchPreference", type);
			this.searchPreference = type;
		},

		async searchRecommend($event) {
			if (this.searchContent && this.searchContent !== '') {
				this.recommendData = await recommendService.getBaiduRecommendData(this.searchContent);
				this.recommendShow = this.recommendData.baidu.length;
			} else {
				// 收起推荐框
				this.recommendShow = false;
			}
		},

		clickSearchIndex({key}) {
			// 收起推荐框
			this.recommendShow = false;
			this.searchContent = this.recommendData.baidu[key];
			this.recommendData.baidu = [];

			// 页面跳转
			setTimeout(() => {
				switch (this.searchPreference) {
					case "baidu":
						window.open("https://www.baidu.com/s?wd=" + this.searchContent, "_blank");
						break
					case "biying":
						window.open("https://cn.bing.com/search?q=" + this.searchContent, "_blank");
						break
					case "google":
						window.open("https://www.google.com/search?q=" + this.searchContent, "_blank");
						break
				}
			}, 500);
		},

		search() {
			// 页面跳转
			switch (this.searchPreference) {
				case "baidu":
					window.open("https://www.baidu.com/s?wd=" + this.searchContent, "_blank");
					break
				case "biying":
					window.open("https://cn.bing.com/search?q=" + this.searchContent, "_blank");
					break
				case "google":
					window.open("https://www.google.com/search?q=" + this.searchContent, "_blank");
					break
			}
		}
	},
};
</script>


<style lang="scss" scoped>
* {
	font-size: 18px;
}
.searchDiv {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
}

.searchContainer {
	margin-top: 30vh;
	//align-items: center;
	background-color: rgb(255, 255, 255);
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}

.searchContainer:hover {
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	transition: border-color 2s ease-in-out;
}

.inputDiv {
	padding-left: 15px;
	display: flex;
	height: 50px;
	align-items: center;
}

.search_logo {
	width: 25px;
}

.search_logo_baidu_mini {
	margin-right: 5px;
}

.search_logo_google_mini {
	margin-right: 5px;
}

.search_logo_biying_mini {
	margin-right: 5px;
}

.input {
	width: 550px;
	height: 100%;
	border: none;
	outline: none;
	font-size: 0.9em;
	transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.border {
	height: 40%;
	width: 1.3px;
	background-color: rgb(223, 223, 223);
}

.micIcon {
	width: 12px;
}

.micButton {
	padding: 0 15px 0 12px;
	border: none;
	background-color: transparent;
	height: 50px;
	cursor: pointer;
	transition-duration: .3s;
}

.micButton:hover {
	//background-color: rgb(255, 230, 230);
	background-color: rgba(0, 78, 255, 0.13);
	transition-duration: .3s;
}

.searchIcon path {
	fill: rgb(114, 114, 114);
}

.micIcon path {
	fill: rgb(255, 81, 0);
}

.line {
	width: 96%;
	margin-left: 2%;
	padding-bottom: 5px;
	border-top: 1px dashed #b2b2b2;
}

.recommendContainer {

	:deep .ant-menu-item {
		margin-top: 0;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		//padding-top: 8px;
		//padding-bottom: 8px;
		height: 35px;
		font-size: 16px;
		animation: expand 0.3s forwards ;

		@keyframes expand {
			from {
				height: 0px;
			}
			to {
				height: 35px;
			}
		}
	}
}
.search_text_baidu {
	font-size: 16px;
}
</style>
